import React, { Component } from 'react';
import { List, Modal, Progress, Table } from 'antd';
import { connect } from 'dva';
import styles from './index.less';
import * as echarts from 'echarts';
import Ellipsis from '@/components/Ellipsis';
import { EChartsType } from 'echarts/core';
import alarm_img from '../../../assets/alarm_img.png';
import arrow_blue_right from '../../../assets/arrow_blue_right.png';
import miles_img from '../../../assets/miles_img.png';
import charge_img from '../../../assets/charge_img.png';
import vip_img from '../../../assets/vip_img.png';
import cars_number_img from '../../../assets/cars_number_img.png';
import cars_active_img from '../../../assets/cars_active_img.png';
import new_car_img from '../../../assets/new_car_img.png';
import alarm_red_img from '../../../assets/alarm_red_img.png';
import alarm_yellow_img from '../../../assets/alarm_yellow_img.png';
import alarm_blue_img from '../../../assets/alarm_blue_img.png';
import alarm_green_img from '../../../assets/alarm_green_img.png';
import chinaMapJson from '@/assets/china.json';
// import chinaMapJson from './chinaMapJson';
import hubeiMapJson from '@/assets/province/湖北省.json';
import anhuiMapJson from '@/assets/province/安徽省.json';
import aomenMapJson from '@/assets/province/澳门.json';
import beijingMapJson from '@/assets/province/北京市.json';
import chongqingMapJson from '@/assets/province/重庆市.json';
import fujianMapJson from '@/assets/province/福建省.json';
import gansuMapJson from '@/assets/province/甘肃省.json';
import guangdongMapJson from '@/assets/province/广东省.json';
import guangxiMapJson from '@/assets/province/广西壮族自治区.json';
import guizhouMapJson from '@/assets/province/贵州省.json';
import hainanMapJson from '@/assets/province/海南省.json';
import hebeiMapJson from '@/assets/province/河北省.json';
import henanMapJson from '@/assets/province/河南省.json';
import heilongjiangMapJson from '@/assets/province/黑龙江省.json';
import hunanMapJson from '@/assets/province/湖南省.json';
import jilinMapJson from '@/assets/province/吉林省.json';
import jiangsuMapJson from '@/assets/province/江苏省.json';
import jiangxiMapJson from '@/assets/province/江西省.json';
import liaoningMapJson from '@/assets/province/辽宁省.json';
import neimengguMapJson from '@/assets/province/内蒙古自治区.json';
import ningxiaMapJson from '@/assets/province/宁夏回族自治区.json';
import qinghaiMapJson from '@/assets/province/青海省.json';
import shandongMapJson from '@/assets/province/山东省.json';
import shanxiMapJson from '@/assets/province/山西省.json';
import shannxiMapJson from '@/assets/province/陕西省.json';
import shanghaiMapJson from '@/assets/province/上海市.json';
import sichuanMapJson from '@/assets/province/四川省.json';
import taiwanMapJson from '@/assets/province/台湾省.json';
import tianjinMapJson from '@/assets/province/天津市.json';
import xizangMapJson from '@/assets/province/西藏自治区.json';
import xianggangMapJson from '@/assets/province/香港.json';
import xinjiangMapJson from '@/assets/province/新疆维吾尔自治区.json';
import yunnanMapJson from '@/assets/province/云南省.json';
import zhejiangMapJson from '@/assets/province/浙江省.json';

const mapStateToProps = (state: any) => ({
  connectPlat: state.connectPlat,
  menu: state.menu,
  loading: state.loading.models['connectPlatLog'],
});
class PlatformInformationOverview extends Component<any, any> {
  state = {
    allDataTimer: null as number, // 所有数据每一小时刷新一次
    haveSelectAlarmSeries: false,
    selectAlarmSeries: null as Object,
    alarmSeriesTimer: null as number,
    mapIsInProvince: false,
    selectProvinceName: '',
    mapEchart: null as EChartsType,
    startSOCDateSelectIndex: 0,
    trafficPeakDateSelectIndex: 0,
    chargePeakDateSelectIndex: 0,
    finishSOCDateSelectIndex: 0,
    platformOverviewData: {},
    enrollVehicles: '0', // 平台注册车辆数
    enrollVehiclesToday: '0', // 今日平台注册车辆数
    onlineCarsTotal: '0', // 在线车辆数
    showAlarmModal: false, // 是否展示告警弹窗
    alarmUrl: '', // 告警弹框网页地址
    testData: [
      {
        area: '湖南省',
        onlineCars: 123432,
        registerCars: 123432,
        detail: [
          {
            area: '长沙市',
            onlineCars: 10000,
            registerCars: 10022,
          },
          {
            area: '怀化市',
            onlineCars: 1233,
            registerCars: 2211,
          },
          {
            area: '邵阳市',
            onlineCars: 122,
            registerCars: 1121,
          },
        ],
      },
      {
        area: '湖北省',
        onlineCars: 113432,
        registerCars: 112231,
        detail: [
          {
            area: '武汉市',
            onlineCars: 10023,
            registerCars: 10022,
          },
          {
            area: '潜江市',
            onlineCars: 2233,
            registerCars: 2211,
          },
          {
            area: '仙桃市',
            onlineCars: 1122,
            registerCars: 1121,
          },
        ],
      },
      {
        area: '广东省',
        onlineCars: 103432,
        registerCars: 91234,
        detail: [
          {
            area: '广州市',
            onlineCars: 10023,
            registerCars: 10022,
          },
          {
            area: '深圳市',
            onlineCars: 2233,
            registerCars: 2211,
          },
          {
            area: '汕头市',
            onlineCars: 1122,
            registerCars: 1121,
          },
        ],
      },
      {
        area: '江西省',
        onlineCars: 99887,
        registerCars: 88112,
        detail: [
          {
            area: '南昌市',
            onlineCars: 10023,
            registerCars: 10022,
          },
        ],
      },
      {
        area: '广西壮族自治区',
        onlineCars: 88776,
        registerCars: 11223,
        detail: [
          {
            area: '桂林市',
            onlineCars: 10023,
            registerCars: 10022,
          },
        ],
      },
      {
        area: '台湾省',
        onlineCars: 11223,
        registerCars: 1122,
        detail: [
          {
            area: '台湾省',
            onlineCars: 10023,
            registerCars: 10022,
          },
        ],
      },
      {
        area: '澳门',
        onlineCars: 11,
        registerCars: 2,
        detail: [
          {
            area: '大堂区',
            onlineCars: 10023,
            registerCars: 10022,
          },
        ],
      },
      {
        area: '香港',
        onlineCars: 111,
        registerCars: 22,
        detail: [
          {
            area: '九龙城区',
            onlineCars: 10023,
            registerCars: 10022,
          },
          {
            area: '西贡区',
            onlineCars: 2233,
            registerCars: 2211,
          },
          {
            area: '湾仔区',
            onlineCars: 1122,
            registerCars: 1121,
          },
        ],
      },
    ],
    carsData: [],
    brandData: [],
    seriesData: [],
    testStartSOCData: [
      {
        name: '20以下',
        value: '15',
      },
      {
        name: '21~40',
        value: '33',
      },
      {
        name: '40~60',
        value: '25',
      },
      {
        name: '61~80',
        value: '25',
      },
      {
        name: '80以上',
        value: '7',
      },
    ],
    testFinishSOCData: [
      {
        name: '50以下',
        value: '15',
      },
      {
        name: '51~70',
        value: '33',
      },
      {
        name: '71~90',
        value: '25',
      },
      {
        name: '90以上',
        value: '25',
      },
    ],
  };

  toThousands = number => {
    number = number !== number ? 0 : Number(number); //不转数字,"0.0"会转成".0"
    if (number !== 0) {
      //等于0的时候返回0
      let arr = String(number).split('.');
      let num = arr[0];
      let len = Math.ceil(num.length / 3) * 3;
      let result = num
        .padStart(len, '0')
        .match(/\d{3}/g)
        .join(',')
        .replace(/^0+/, '');
      return arr[1] ? result + '.' + arr[1] : result;
    } else {
      return 0;
    }
  };

  setTotalAlarmsValue = () => {
    let value = 0;
    this.state.platformOverviewData?.carSeriesAlarms?.map(i => {
      value += parseInt(i.total);
    });
    return value;
  };

  setFinishSOCEchart = () => {
    let data = [];
    const colorList = ['#00BDA9', '#5E89FC', '#9256ED', '#ED8051', '#ED6AED'];
    this.state.testFinishSOCData.map((i, index) => {
      let item = {};
      item.value =
        index === 0
          ? this.state.finishSOCDateSelectIndex === 0
            ? this.state.platformOverviewData?.socYesterday?.e_soclessthen50
            : this.state.finishSOCDateSelectIndex === 1
            ? this.state.platformOverviewData?.soc7Days?.e_soclessthen50
            : this.state.platformOverviewData?.soc30Days?.e_soclessthen50
          : index === 1
          ? this.state.finishSOCDateSelectIndex === 0
            ? this.state.platformOverviewData?.socYesterday?.e_soc50to70
            : this.state.finishSOCDateSelectIndex === 1
            ? this.state.platformOverviewData?.soc7Days?.e_soc50to70
            : this.state.platformOverviewData?.soc30Days?.e_soc50to70
          : index === 2
          ? this.state.finishSOCDateSelectIndex === 0
            ? this.state.platformOverviewData?.socYesterday?.e_soc70to90
            : this.state.finishSOCDateSelectIndex === 1
            ? this.state.platformOverviewData?.soc7Days?.e_soc70to90
            : this.state.platformOverviewData?.soc30Days?.e_soc70to90
          : index === 3
          ? this.state.finishSOCDateSelectIndex === 0
            ? this.state.platformOverviewData?.socYesterday?.e_socmorethen90
            : this.state.finishSOCDateSelectIndex === 1
            ? this.state.platformOverviewData?.soc7Days?.e_socmorethen90
            : this.state.platformOverviewData?.soc30Days?.e_socmorethen90
          : 0;
      item.name = i.name;
      item.itemStyle = {
        color: colorList[index],
      };
      data.push(item);
    });
    const finishSOCEchart = echarts.init(document.getElementById('finishSOCEchart') as HTMLElement);
    finishSOCEchart.clear();
    finishSOCEchart.setOption({
      animation: false,
      series: [
        {
          silent: true,
          name: '结束充电SOC占比',
          type: 'pie',
          radius: ['60%', '80%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          clockwise: false,
          label: {
            show: false,
            position: 'center',
          },
          labelLine: {
            show: false,
          },
          itemStyle: {
            borderRadius: 5,
            borderWidth: 1,
            borderColor: 'white',
          },
          data: data,
        },
      ],
    });
  };

  setSeriesAlarmEchart = () => {
    let data = [];
    this.state.platformOverviewData?.carSeriesAlarms.map(i => {
      const item = { name: i.carSeries, value: i.total };
      data.push(item);
    });
    const seriesAlarmEchart = echarts.init(
      document.getElementById('seriesAlarmEchart') as HTMLElement,
    );
    seriesAlarmEchart.clear();
    seriesAlarmEchart.setOption({
      animation: false,
      legend: {
        selectedMode: false,
        orient: 'vertical',
        right: 20,
        itemGap: 15,
        top: '40%',
        icon: 'circle',
        itemHeight: 8,
        textStyle: {
          rich: {
            a: {
              width: 60,
              fontSize: 10,
            },
            b: {
              width: 40,
              align: 'left',
              fontSize: 12,
            },
          },
        },
        formatter: name => {
          let value = 0;
          data.map(i => (i.name === name ? (value = parseInt(i.value)) : 0));
          return `{a|${name}}{b|${value}}`;
        },
      },
      series: [
        {
          name: '车系报警占比',
          type: 'pie',
          radius: ['37%', '50%'],
          center: ['30%', '50%'],
          avoidLabelOverlap: false,
          clockwise: false,
          selectedMode: true,
          emphasis: {
            disabled: true,
          },
          select: {
            label: {
              show: true,
              position: 'outside',
              backgroundColor: 'white',
              formatter: '{titleStyle|{c}/{d}%}\n{detailStyle|{b}}',
              shadowColor: 'rgba(0,0,0,0.12)',
              shadowBlur: 12,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderRadius: 6,
              padding: 10,
              rich: {
                titleStyle: {
                  fontSize: 14,
                },
                detailStyle: {
                  padding: [5, 0, 0, 0],
                  fontSize: 12,
                },
              },
            },
          },
          label: {
            show: false,
            position: 'center',
          },
          labelLine: {
            show: false,
          },
          itemStyle: {
            borderRadius: 5,
            borderWidth: 1,
            borderColor: 'white',
          },
          data: data,
        },
      ],
    });

    const self = this;
    seriesAlarmEchart.on('selectchanged', function(params) {
      console.log(params);
      if (params.fromAction === 'select') {
        self.setState({
          haveSelectAlarmSeries: true,
          selectAlarmSeries:
            self.state.platformOverviewData.carSeriesAlarms[params.selected[0].dataIndex[0]],
        });
        clearInterval(self.state.alarmSeriesTimer);
      } else {
        self.setState({
          haveSelectAlarmSeries: false,
          selectAlarmSeries: self.state.platformOverviewData.carSeriesAlarms[0],
        });
        self.setAlarmLoop();
      }
    });
  };

  setChargePeakEchart = () => {
    let data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    let totalData;
    totalData =
      this.state.chargePeakDateSelectIndex === 0
        ? this.state.platformOverviewData?.chargingPeakCurve1Day
        : this.state.chargePeakDateSelectIndex === 1
        ? this.state.platformOverviewData?.chargingPeakCurve7Day
        : this.state.platformOverviewData?.chargingPeakCurve30Day;
    totalData?.map(i => {
      data[parseInt(i.hours)] = parseInt(i.num);
    });
    const chargePeakEchart = echarts.init(
      document.getElementById('chargePeakEchart') as HTMLElement,
    );
    chargePeakEchart.clear();
    chargePeakEchart.setOption({
      animation: false,
      grid: {
        top: 30,
        bottom: 20,
        left: '10%',
        right: '2%',
      },
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: 'rgba(0, 0, 0, 0)',
          },
        },
        formatter: '时间 {b0}:00<br />充电车辆 {c0}辆',
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [
          '00',
          '01',
          '02',
          '03',
          '04',
          '05',
          '06',
          '07',
          '08',
          '09',
          '10',
          '11',
          '12',
          '13',
          '14',
          '15',
          '16',
          '17',
          '18',
          '19',
          '20',
          '21',
          '22',
          '23',
        ],
        axisLabel: {
          color: 'rgba(0, 0, 0, 0.5)',
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
        axisLabel: {
          color: 'rgba(0, 0, 0, 0.5)',
        },
        axisLine: {
          show: false,
        },
      },
      series: [
        {
          silent: true,
          smooth: true,
          data: data,
          type: 'line',
          name: '充电高峰',
          triggerLineEvent: true,
          showSymbol: false,
          itemStyle: {
            color: '#7D88FE',
          },
          lineStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#BBC2FF',
                },
                {
                  offset: 1,
                  color: '#7D88FE',
                },
              ],
              global: false,
            },
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#D0D5FF',
                },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255, 1)',
                },
              ],
              global: false,
            },
          },
        },
      ],
    });
  };

  setStartSOCEchart = () => {
    let data = [];
    const colorList = ['#00BDA9', '#5E89FC', '#9256ED', '#ED8051', '#ED6AED'];
    this.state.testStartSOCData.map((i, index) => {
      let item = {};
      item.value =
        index === 0
          ? this.state.startSOCDateSelectIndex === 0
            ? this.state.platformOverviewData?.socYesterday?.soclessthen20
            : this.state.startSOCDateSelectIndex === 1
            ? this.state.platformOverviewData?.soc7Days?.soclessthen20
            : this.state.platformOverviewData?.soc30Days?.soclessthen20
          : index === 1
          ? this.state.startSOCDateSelectIndex === 0
            ? this.state.platformOverviewData?.socYesterday?.soc20to40
            : this.state.startSOCDateSelectIndex === 1
            ? this.state.platformOverviewData?.soc7Days?.soc20to40
            : this.state.platformOverviewData?.soc30Days?.soc20to40
          : index === 2
          ? this.state.startSOCDateSelectIndex === 0
            ? this.state.platformOverviewData?.socYesterday?.soc40to60
            : this.state.startSOCDateSelectIndex === 1
            ? this.state.platformOverviewData?.soc7Days?.soc40to60
            : this.state.platformOverviewData?.soc30Days?.soc40to60
          : index === 3
          ? this.state.startSOCDateSelectIndex === 0
            ? this.state.platformOverviewData?.socYesterday?.soc60to80
            : this.state.startSOCDateSelectIndex === 1
            ? this.state.platformOverviewData?.soc7Days?.soc60to80
            : this.state.platformOverviewData?.soc30Days?.soc60to80
          : index === 4
          ? this.state.startSOCDateSelectIndex === 0
            ? this.state.platformOverviewData?.socYesterday?.socmorethen80
            : this.state.startSOCDateSelectIndex === 1
            ? this.state.platformOverviewData?.soc7Days?.socmorethen80
            : this.state.platformOverviewData?.soc30Days?.socmorethen80
          : 0;
      item.name = i.name;
      item.itemStyle = {
        color: colorList[index],
      };
      data.push(item);
    });
    const startSOCEchart = echarts.init(document.getElementById('startSOCEchart') as HTMLElement);
    startSOCEchart.clear();
    startSOCEchart.setOption({
      animation: false,
      series: [
        {
          silent: true,
          name: '开始充电SOC占比',
          type: 'pie',
          radius: ['60%', '80%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          clockwise: false,
          label: {
            show: false,
            position: 'center',
          },
          labelLine: {
            show: false,
          },
          itemStyle: {
            borderRadius: 5,
            borderWidth: 1,
            borderColor: 'white',
          },
          data: data,
        },
      ],
    });
  };

  setTrafficPeakEchart = () => {
    let data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    let totalData;
    totalData =
      this.state.trafficPeakDateSelectIndex === 0
        ? this.state.platformOverviewData?.peakCurve1Day
        : this.state.trafficPeakDateSelectIndex === 1
        ? this.state.platformOverviewData?.peakCurve7Day
        : this.state.platformOverviewData?.peakCurve30Day;
    totalData?.map(i => {
      data[parseInt(i.hours)] = parseInt(i.num);
    });
    const trafficPeakEchart = echarts.init(
      document.getElementById('trafficPeakEchart') as HTMLElement,
    );
    trafficPeakEchart.clear();
    trafficPeakEchart.setOption({
      animation: false,
      grid: {
        top: 30,
        bottom: 20,
        left: '11%',
        right: '2%',
      },
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: 'rgba(0, 0, 0, 0)',
          },
        },
        formatter: '时间 {b0}:00<br />在线车辆 {c0}',
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [
          '00',
          '01',
          '02',
          '03',
          '04',
          '05',
          '06',
          '07',
          '08',
          '09',
          '10',
          '11',
          '12',
          '13',
          '14',
          '15',
          '16',
          '17',
          '18',
          '19',
          '20',
          '21',
          '22',
          '23',
        ],
        axisLabel: {
          color: 'rgba(0, 0, 0, 0.5)',
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
        axisLabel: {
          color: 'rgba(0, 0, 0, 0.5)',
        },
        axisLine: {
          show: false,
        },
      },
      series: [
        {
          silent: true,
          smooth: true,
          data: data,
          type: 'line',
          name: '用车高峰',
          triggerLineEvent: true,
          showSymbol: false,
          itemStyle: {
            color: '#5FD3BB',
          },
          lineStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#A2FEEA',
                },
                {
                  offset: 1,
                  color: '#5FD3BB',
                },
              ],
              global: false,
            },
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#C3F9EE',
                },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255, 1)',
                },
              ],
              global: false,
            },
          },
        },
      ],
    });
  };

  setDailyChargeEchart = () => {
    let dataArr = [];
    for (let i = 0; i < 7; i++) {
      const time = new Date().getTime() - 24 * 60 * 60 * 1000 * (i + 1);
      const tempDate = new Date(time);
      dataArr.push({
        day: `${tempDate.getMonth() + 1}.${tempDate.getDate()}`,
        charge: 0,
        date: `${tempDate.getFullYear()}${
          tempDate.getMonth() + 1 < 10 ? `0${tempDate.getMonth() + 1}` : tempDate.getMonth() + 1
        }${tempDate.getDate() < 10 ? `0${tempDate.getDate()}` : tempDate.getDate()}`,
      });
    }
    this.state.platformOverviewData?.charge7Days.map(i => {
      dataArr.map(e => {
        if (e.date === i.day) {
          e.charge = i.charge;
        }
      });
    });
    dataArr.reverse();
    const dailyChargeEchart = echarts.init(
      document.getElementById('dailyChargeEchart') as HTMLElement,
    );
    dailyChargeEchart.setOption({
      grid: {
        top: 30,
        bottom: 20,
        left: '10%',
        right: '2%',
      },
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: 'rgba(0, 0, 0, 0)',
          },
        },
      },
      xAxis: {
        type: 'category',
        data: dataArr.map(i => i.day),
        axisLabel: {
          color: 'rgba(0, 0, 0, 0.5)',
        },
        axisLine: {
          lineStyle: {
            color: '#3083F1',
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
        axisLabel: {
          color: 'rgba(0, 0, 0, 0.5)',
        },
        axisLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#4AC4FA',
                },
                {
                  offset: 1,
                  color: '#3083F1',
                },
              ],
              global: false,
            },
          },
        },
      },
      series: [
        {
          silent: true,
          data: dataArr.map(i => i.charge),
          type: 'line',
          triggerLineEvent: true,
          itemStyle: {
            opacity: 0,
          },
          lineStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#4AC4FA',
                },
                {
                  offset: 1,
                  color: '#3083F1',
                },
              ],
              global: false,
            },
          },
        },
      ],
    });
  };

  setDailyMileageEchart = () => {
    let dataArr = [];
    for (let i = 0; i < 7; i++) {
      const time = new Date().getTime() - 24 * 60 * 60 * 1000 * (i + 1);
      const tempDate = new Date(time);
      dataArr.push({
        day: `${tempDate.getMonth() + 1}.${tempDate.getDate()}`,
        mileage: 0,
        date: `${tempDate.getFullYear()}${
          tempDate.getMonth() + 1 < 10 ? `0${tempDate.getMonth() + 1}` : tempDate.getMonth() + 1
        }${tempDate.getDate() < 10 ? `0${tempDate.getDate()}` : tempDate.getDate()}`,
      });
    }
    this.state.platformOverviewData?.mileage7Days.map(i => {
      dataArr.map(e => {
        if (e.date === i.day) {
          e.mileage = i.mileage;
        }
      });
    });
    dataArr.reverse();
    const dailyMileageEchart = echarts.init(
      document.getElementById('dailyMileageEchart') as HTMLElement,
    );
    dailyMileageEchart.setOption({
      tooltip: {
        show: true,
      },
      grid: {
        top: 30,
        bottom: 20,
        left: '10%',
        right: '2%',
      },
      xAxis: {
        type: 'category',
        data: dataArr.map(i => i.day),
        axisLabel: {
          color: 'rgba(0, 0, 0, 0.5)',
        },
        axisLine: {
          lineStyle: {
            color: '#3083F1',
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
        axisLabel: {
          color: 'rgba(0, 0, 0, 0.5)',
        },
        axisLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#4AC4FA',
                },
                {
                  offset: 1,
                  color: '#3083F1',
                },
              ],
              global: false,
            },
          },
        },
      },
      series: [
        {
          data: dataArr.map(i => i.mileage),
          type: 'bar',
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#4AC4FA',
                },
                {
                  offset: 1,
                  color: '#3083F1',
                },
              ],
              global: false,
            },
          },
        },
      ],
    });
  };

  setPowerEchart = () => {
    const powerEchart = echarts.init(document.getElementById('powerEchart') as HTMLElement);
    powerEchart.setOption({
      series: [
        {
          silent: true,
          name: '动力类型占比',
          type: 'pie',
          radius: ['20%', '40%'],
          center: ['25%', '50%'],
          avoidLabelOverlap: false,
          clockwise: false,
          label: {
            show: false,
            position: 'center',
          },
          labelLine: {
            show: false,
          },
          data: [],
        },
      ],
    });
  };

  setBatteryHealthEchart = () => {
    const batteryHealthEchart = echarts.init(
      document.getElementById('batteryHealthEchart') as HTMLElement,
    );
    batteryHealthEchart.setOption({
      series: [
        {
          silent: true,
          name: '动力电池健康度占比',
          type: 'pie',
          radius: ['20%', '40%'],
          center: ['25%', '50%'],
          avoidLabelOverlap: false,
          clockwise: false,
          label: {
            show: false,
            position: 'center',
          },
          labelLine: {
            show: false,
          },
          data: [],
        },
      ],
    });
  };

  setSeriesEchart = () => {
    const seriesEchart = echarts.init(document.getElementById('seriesEchart') as HTMLElement);
    seriesEchart.setOption({
      legend: {
        selectedMode: false,
        type: 'scroll',
        orient: 'vertical',
        right: 0,
        itemGap: 15,
        top: 'middle',
        icon: 'circle',
        itemHeight: 8,
        textStyle: {
          rich: {
            a: {
              width: 80,
              fontSize: 10,
            },
            b: {
              width: 40,
              align: 'right',
              color: 'rgba(0, 0, 0, 0.5)',
              fontSize: 10,
            },
            c: {
              width: 40,
              align: 'right',
              color: 'rgba(0, 0, 0, 0.5)',
              fontSize: 10,
            },
          },
        },
        formatter: name => {
          let value = 0;
          this.state.seriesData.map(i => (i.seriesName === name ? (value = i.total) : 0));
          let totalValue = 0;
          this.state.seriesData.map(i => (totalValue += i.total));
          let percent = ((value * 100) / totalValue).toFixed(0);
          return `{a|${name}}{b|${value}}{c|${percent}%}`;
        },
      },
      series: [
        {
          silent: true,
          name: '车系占比',
          type: 'pie',
          radius: ['20%', '40%'],
          center: ['25%', '50%'],
          avoidLabelOverlap: false,
          clockwise: false,
          label: {
            show: false,
            position: 'center',
          },
          labelLine: {
            show: false,
          },
          data: this.state.seriesData.map(i => {
            return {
              name: i.seriesName,
              value: i.total,
            };
          }),
        },
      ],
    });
  };

  setBrandEchart = () => {
    const brandEchart = echarts.init(document.getElementById('brandEchart') as HTMLElement);
    brandEchart.setOption({
      legend: {
        selectedMode: false,
        type: 'scroll',
        orient: 'vertical',
        right: 0,
        itemGap: 15,
        top: 'middle',
        icon: 'circle',
        itemHeight: 8,
        textStyle: {
          rich: {
            a: {
              width: 60,
              fontSize: 10,
            },
            b: {
              width: 40,
              align: 'right',
              color: 'rgba(0, 0, 0, 0.5)',
              fontSize: 10,
            },
            c: {
              width: 40,
              align: 'right',
              color: 'rgba(0, 0, 0, 0.5)',
              fontSize: 10,
            },
          },
        },
        formatter: name => {
          let value = 0;
          this.state.brandData.map(i => (i.brandName === name ? (value = i.total) : 0));
          let totalValue = 0;
          this.state.brandData.map(i => (totalValue += i.total));
          let percent = ((value * 100) / totalValue).toFixed(0);
          return `{a|${name}}{b|${value}}{c|${percent}%}`;
        },
      },
      series: [
        {
          silent: true,
          name: '品牌占比',
          type: 'pie',
          radius: ['20%', '40%'],
          center: ['25%', '50%'],
          avoidLabelOverlap: false,
          clockwise: false,
          label: {
            show: false,
            position: 'center',
          },
          labelLine: {
            show: false,
          },
          data: this.state.brandData.map(i => {
            return {
              name: i.brandName,
              value: i.total,
            };
          }),
        },
      ],
    });
  };

  setMapEchart = () => {
    this.state.mapEchart = echarts.init(document.getElementById('mapEchart') as HTMLElement);
    echarts.registerMap('china', chinaMapJson, {});
    const mapOption = this.getMapOption('china');
    this.state.mapEchart.setOption(mapOption);

    const self = this;
    this.state.mapEchart.on('click', function(params) {
      if (!self.state.mapIsInProvince) {
        if (params.name === '南海诸岛') return;
        self.setState({
          mapIsInProvince: true,
          selectProvinceName: params.name,
        });
        const provinceCode = self.registerProvinceMap(params.name);
        self.state.mapEchart.clear();
        const mapOption = self.getMapOption(provinceCode);
        self.state.mapEchart.setOption(mapOption);
      }
    });

    window.onresize = function() {
      self.state.mapEchart.resize();
    };
  };

  backToChinaMap = async () => {
    await this.setState({
      mapIsInProvince: false,
    });
    this.state.mapEchart.clear();
    this.setMapEchart();
  };

  registerProvinceMap = provinceName => {
    let provinceCode = '';
    if (provinceName === '安徽省') {
      provinceCode = 'anhui';
      echarts.registerMap('anhui', anhuiMapJson, {});
    } else if (provinceName === '澳门') {
      provinceCode = 'aomen';
      echarts.registerMap('aomen', aomenMapJson, {});
    } else if (provinceName === '北京市') {
      provinceCode = 'beijing';
      echarts.registerMap('beijing', beijingMapJson, {});
    } else if (provinceName === '重庆市') {
      provinceCode = 'chongqing';
      echarts.registerMap('chongqing', chongqingMapJson, {});
    } else if (provinceName === '福建省') {
      provinceCode = 'fujian';
      echarts.registerMap('fujian', fujianMapJson, {});
    } else if (provinceName === '甘肃省') {
      provinceCode = 'gansu';
      echarts.registerMap('gansu', gansuMapJson, {});
    } else if (provinceName === '广东省') {
      provinceCode = 'guangdong';
      echarts.registerMap('guangdong', guangdongMapJson, {});
    } else if (provinceName === '广西壮族自治区') {
      provinceCode = 'guangxi';
      echarts.registerMap('guangxi', guangxiMapJson, {});
    } else if (provinceName === '贵州省') {
      provinceCode = 'guizhou';
      echarts.registerMap('guizhou', guizhouMapJson, {});
    } else if (provinceName === '海南省') {
      provinceCode = 'hainan';
      echarts.registerMap('hainan', hainanMapJson, {});
    } else if (provinceName === '河北省') {
      provinceCode = 'hebei';
      echarts.registerMap('hebei', hebeiMapJson, {});
    } else if (provinceName === '河南省') {
      provinceCode = 'henan';
      echarts.registerMap('henan', henanMapJson, {});
    } else if (provinceName === '黑龙江省') {
      provinceCode = 'heilongjiang';
      echarts.registerMap('heilongjiang', heilongjiangMapJson, {});
    } else if (provinceName === '湖北省') {
      provinceCode = 'hubei';
      echarts.registerMap('hubei', hubeiMapJson, {});
    } else if (provinceName === '湖南省') {
      provinceCode = 'hunan';
      echarts.registerMap('hunan', hunanMapJson, {});
    } else if (provinceName === '吉林省') {
      provinceCode = 'jilin';
      echarts.registerMap('jilin', jilinMapJson, {});
    } else if (provinceName === '江苏省') {
      provinceCode = 'jiangsu';
      echarts.registerMap('jiangsu', jiangsuMapJson, {});
    } else if (provinceName === '江西省') {
      provinceCode = 'jiangxi';
      echarts.registerMap('jiangxi', jiangxiMapJson, {});
    } else if (provinceName === '辽宁省') {
      provinceCode = 'liaoning';
      echarts.registerMap('liaoning', liaoningMapJson, {});
    } else if (provinceName === '内蒙古自治区') {
      provinceCode = 'neimenggu';
      echarts.registerMap('neimenggu', neimengguMapJson, {});
    } else if (provinceName === '宁夏回族自治区') {
      provinceCode = 'ningxia';
      echarts.registerMap('ningxia', ningxiaMapJson, {});
    } else if (provinceName === '青海省') {
      provinceCode = 'qinghai';
      echarts.registerMap('qinghai', qinghaiMapJson, {});
    } else if (provinceName === '山东省') {
      provinceCode = 'shandong';
      echarts.registerMap('shandong', shandongMapJson, {});
    } else if (provinceName === '山西省') {
      provinceCode = 'shanxi';
      echarts.registerMap('shanxi', shanxiMapJson, {});
    } else if (provinceName === '陕西省') {
      provinceCode = 'shannxi';
      echarts.registerMap('shannxi', shannxiMapJson, {});
    } else if (provinceName === '上海市') {
      provinceCode = 'shanghai';
      echarts.registerMap('shanghai', shanghaiMapJson, {});
    } else if (provinceName === '四川省') {
      provinceCode = 'sichuan';
      echarts.registerMap('sichuan', sichuanMapJson, {});
    } else if (provinceName === '台湾省') {
      provinceCode = 'taiwan';
      echarts.registerMap('taiwan', taiwanMapJson, {});
    } else if (provinceName === '天津市') {
      provinceCode = 'tianjin';
      echarts.registerMap('tianjin', tianjinMapJson, {});
    } else if (provinceName === '西藏自治区') {
      provinceCode = 'xizang';
      echarts.registerMap('xizang', xizangMapJson, {});
    } else if (provinceName === '香港') {
      provinceCode = 'xianggang';
      echarts.registerMap('xianggang', xianggangMapJson, {});
    } else if (provinceName === '新疆维吾尔自治区') {
      provinceCode = 'xinjiang';
      echarts.registerMap('xinjiang', xinjiangMapJson, {});
    } else if (provinceName === '云南省') {
      provinceCode = 'yunnan';
      echarts.registerMap('yunnan', yunnanMapJson, {});
    } else if (provinceName === '浙江省') {
      provinceCode = 'zhejiang';
      echarts.registerMap('zhejiang', zhejiangMapJson, {});
    }
    return provinceCode;
  };

  getMapOption = mapName => {
    return {
      geo: {
        selectedMode: false,
        id: 'myMap',
        emphasis: {
          itemStyle: {
            shadowColor: 'rgba(0,0,0,0.06)',
            shadowBlur: 10,
            shadowOffsetX: 5,
            shadowOffsetY: 5,
            borderWidth: 0,
            areaColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: '#3885F2', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#45B2F9', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          label: {
            height: 50,
            borderRadius: 10,
            shadowColor: 'rgba(0,0,0,0.06)',
            shadowBlur: 10,
            shadowOffsetX: 5,
            shadowOffsetY: 5,
            position: ['40%', 100],
            formatter: params => {
              let onlineCarsNumber = 0;
              let offlineCarsNumber = 0;
              if (this.state.mapIsInProvince) {
                this.state.carsData.map(i => {
                  i.detail.map(subItem => {
                    if (params.name === subItem.area) {
                      onlineCarsNumber = subItem.onlineCars;
                      offlineCarsNumber = subItem.offlineCars;
                    }
                  });
                });
              } else {
                this.state.carsData.map(i => {
                  if (params.name === i.area) {
                    onlineCarsNumber = i.onlineCars;
                    offlineCarsNumber = i.offlineCars;
                  }
                });
              }
              return (
                '{a|}{b|' +
                params.name +
                '}' +
                '\n{c|在线：' +
                onlineCarsNumber +
                '}\n{d|离线：' +
                offlineCarsNumber +
                '}'
              );
            },
            padding: 10,
            backgroundColor: 'rgba(255, 255, 255, 0.9)',
            rich: {
              a: {
                width: 6,
                height: 6,
                borderRadius: 3,
                backgroundColor: '#0072FE',
                align: 'left',
              },
              b: {
                align: 'left',
                padding: [0, 0, 0, 5],
                color: 'black',
              },
              c: {
                color: '#0070FC',
                fontSize: 12,
                align: 'left',
                padding: [10, 0, 0, 0],
              },
              d: {
                color: '#0070FC',
                fontSize: 12,
                align: 'left',
                padding: [5, 0, 0, 0],
              },
            },
          },
        },
        map: mapName,
        roam: false,
        itemStyle: {
          areaColor: '#E0F1FE',
          borderColor: '#E0F1FE',
        },
      },
    };
  };

  setCarNumberEchart = () => {
    const carNumberEchart = echarts.init(document.getElementById('carNumberEchart') as HTMLElement);
    carNumberEchart.clear();
    carNumberEchart.setOption({
      silent: true,
      animation: false,
      series: [
        {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          radius: '80%',
          pointer: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 10,
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          detail: {
            show: false,
          },
        },
        {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          radius: '80%',
          pointer: {
            show: false,
          },
          clockwise: false,
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: true,
            itemStyle: {
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowOffsetY: 3,
              borderWidth: 15,
              borderColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#165EE2', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#0170FD', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          data: [
            {
              value:
                this.state.onlineCarsTotal / this.state.enrollVehicles === Infinity
                  ? '0'
                  : ((this.state.onlineCarsTotal / this.state.enrollVehicles) * 100).toFixed(1),
              name: '在线',
              title: {
                show: true,
                offsetCenter: ['0%', '-40%'],
                fontSize: 14,
                color: '#288CFE',
              },
            },
          ],
          detail: {
            show: true,
            offsetCenter: ['10%', '0%'],
            formatter: function(value) {
              return `{a|${value}}{b|%}`;
            },
            rich: {
              a: {
                fontSize: 40,
                color: '#0670FF',
              },
              b: {
                fontSize: 10,
                padding: [20, 0, 0, 2],
                color: 'rgba(0,0,0,0.8)',
              },
            },
          },
        },
      ],
    });
  };

  changeChargePeakDateSelectIndex = async index => {
    await this.setState({
      chargePeakDateSelectIndex: index,
    });
    this.setChargePeakEchart();
  };

  changeFinishSOCDateSelectIndex = async index => {
    await this.setState({
      finishSOCDateSelectIndex: index,
    });
    this.setFinishSOCEchart();
  };

  changeStartSOCDateSelectIndex = async index => {
    await this.setState({
      startSOCDateSelectIndex: index,
    });
    this.setStartSOCEchart();
  };

  changeTrafficPeakDateSelectIndex = async index => {
    await this.setState({
      trafficPeakDateSelectIndex: index,
    });
    this.setTrafficPeakEchart();
  };

  setAlarmLoop = () => {
    if (this.state.alarmSeriesTimer != null) {
      clearInterval(this.state.alarmSeriesTimer);
    }
    const self = this;
    this.state.alarmSeriesTimer = setInterval(() => {
      if (self.state.selectAlarmSeries == null) {
        self.setState({
          selectAlarmSeries: self.state.platformOverviewData?.carSeriesAlarms[0],
        });
      } else {
        if (!self.state.haveSelectAlarmSeries) {
          let currentIndex = 0;
          let toIndex;
          for (let i = 0; i < self.state.platformOverviewData?.carSeriesAlarms.length; i++) {
            if (
              self.state.platformOverviewData?.carSeriesAlarms[i].carSeries ===
              self.state.selectAlarmSeries.carSeries
            ) {
              currentIndex = i;
              break;
            }
          }
          if (currentIndex >= self.state.platformOverviewData?.carSeriesAlarms.length - 1) {
            toIndex = 0;
          } else {
            toIndex = currentIndex + 1;
          }
          self.setState({
            selectAlarmSeries: self.state.platformOverviewData?.carSeriesAlarms[toIndex],
          });
        }
      }
    }, 2000);
  };

  async componentDidMount() {
    await this.refreshAllData();
    if (!this.state.allDataTimer) {
      this.state.allDataTimer = setInterval(this.refreshAllData, 60000 * 60);
    }
  }

  refreshAllData = async () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'common/listGet',
      payload: { url: '/usertravel/platformOverview' },
      callback: data => {
        console.log('platformOverview---data');
        console.log(data);
        this.setState({ platformOverviewData: data.data });
        this.setStartSOCEchart();
        this.setFinishSOCEchart();
        this.setTrafficPeakEchart();
        this.setChargePeakEchart();
        this.setSeriesAlarmEchart();
        this.setAlarmLoop();
        this.setDailyMileageEchart();
        this.setDailyChargeEchart();
      },
    });
    dispatch({
      type: 'common/listGet',
      payload: { url: '/device/connect/platform/getBrandTotal' },
      callback: data => {
        console.log('getBrandTotal---data');
        console.log(data);
        if (data.statusCode === '0') {
          this.setState({
            brandData: data.data,
          });
        }
        this.setBrandEchart();
      },
    });
    dispatch({
      type: 'common/listGet',
      payload: { url: '/device/connect/platform/getSeriesTotal' },
      callback: data => {
        console.log('getSeriesTotal---data');
        console.log(data);
        if (data.statusCode === '0') {
          this.setState({
            seriesData: data.data,
          });
        }
        this.setSeriesEchart();
      },
    });
    await Promise.all([
      dispatch({
        type: 'common/listGet',
        payload: { url: '/usertravel/carMapProvinceRank' },
        callback: data => {
          console.log('carMapProvinceRank---data');
          console.log(data);
          let tempArr = [];
          let tempOnlineCars = 0;
          if (data.statusCode === '0') {
            for (let i = 0; i < data.data.length; i++) {
              const dataItem = data.data[i];
              tempArr.push({
                area: dataItem.province,
                onlineCars: dataItem.online,
                offlineCars: dataItem.offline,
                detail: [],
              });
              tempOnlineCars += dataItem.online;
            }
            this.setState({
              carsData: tempArr,
              onlineCarsTotal: tempOnlineCars.toString(),
            });
          }
        },
      }),
      dispatch({
        type: 'common/listGet',
        payload: { url: '/device/connect/platform/getEnrollVehiclesToday' },
        callback: data => {
          console.log('getEnrollVehiclesToday---data');
          console.log(data);
          if (data.statusCode === '0') {
            this.setState({
              enrollVehiclesToday: data.data,
            });
          }
        },
      }),
      dispatch({
        type: 'common/listGet',
        payload: { url: '/device/connect/platform/getEnrollVehicles' },
        callback: data => {
          console.log('getEnrollVehicles---data');
          console.log(data);
          if (data.statusCode === '0') {
            this.setState({
              enrollVehicles: data.data,
            });
          }
        },
      }),
    ]).then(async () => {
      await Promise.all(
        this.state.carsData.map(i => {
          dispatch({
            type: 'common/listGet',
            payload: { url: '/usertravel/carMapCityRank', province: i.area },
            callback: data => {
              console.log('carMapCityRank---data');
              console.log(data);
              const tempArr = [];
              if (data.statusCode === '0') {
                data.data.map(e => {
                  tempArr.push({
                    area: e.city,
                    onlineCars: e.online,
                    offlineCars: e.offline,
                  });
                });
              }
              i.detail = tempArr;
              this.setState({
                carsData: this.state.carsData,
              });
            },
          });
        }),
      ).then(() => {
        this.setCarNumberEchart();
        this.setMapEchart();
      });
    });
    dispatch({
      type: 'vehicleInfoQuery/getDataWithRes',
      payload: {
        url: '/common/bigdata/url',
        dictKey: 'alarmViewHour',
      },
      callback: response => {
        if (response && response.statusCode === '0' && response.data) {
          this.setState({
            alarmUrl: `${response.data}`,
          });
        }
      },
    });
    this.setPowerEchart();
    this.setBatteryHealthEchart();
  };

  componentWillUnmount() {
    clearInterval(this.state.allDataTimer);
    clearInterval(this.state.alarmSeriesTimer);
  }

  render() {
    const columns = [
      {
        title: '排名',
        dataIndex: 'rank',
        width: 50,
      },
      {
        title: '地区',
        dataIndex: 'area',
        width: 80,
        render: (text: any, record: any, index: any) => {
          return (
            <Ellipsis length={4} tooltip>
              {text}
            </Ellipsis>
          );
        },
      },
      {
        title: '在线车辆数',
        dataIndex: 'onlineCars',
        width: 90,
      },
      {
        title: '离线车辆数',
        dataIndex: 'offlineCars', // registerCars
        width: 90,
      },
    ];
    const dataSource = [];
    if (this.state.mapIsInProvince) {
      this.state.carsData.map(i => {
        if (i.area === this.state.selectProvinceName) {
          for (let j = 0; j < i.detail.length; j++) {
            dataSource.push({
              key: j,
              rank: j + 1,
              area: i.detail[j].area,
              onlineCars: this.toThousands(i.detail[j].onlineCars),
              offlineCars: this.toThousands(i.detail[j].offlineCars),
            });
          }
        }
      });
    } else {
      for (let i = 0; i < this.state.carsData.length; i++) {
        dataSource.push({
          key: i,
          rank: i + 1,
          area: this.state.carsData[i].area,
          onlineCars: this.toThousands(this.state.carsData[i].onlineCars),
          offlineCars: this.toThousands(this.state.carsData[i].offlineCars),
        });
      }
    }
    return (
      <div className={styles.root}>
        <div className={styles.topView}>
          <div className={styles.topViewLeft}>
            <div
              onClick={() => {
                console.log(this.state.alarmUrl);
                this.setState({
                  showAlarmModal: true,
                });
              }}
              className={styles.topViewLeftAlarmView}
            >
              <div className={styles.topViewLeftAlarmViewTitleView}>
                <img className={styles.topViewLeftAlarmViewTitleViewImg} src={alarm_img} />
                <div className={styles.topViewLeftAlarmViewTitleViewText}>当前故障警报</div>
              </div>
              <div className={styles.topViewLeftAlarmViewDetailView}>
                <div className={styles.topViewLeftAlarmViewDetailViewValue}>
                  {this.toThousands(this.setTotalAlarmsValue())}
                </div>
                <img
                  className={styles.topViewLeftAlarmViewDetailViewValueArrow}
                  src={arrow_blue_right}
                />
              </div>
            </div>
            <div className={styles.topViewLeftDrivingChargingView}>
              <div className={styles.topViewLeftDrivingChargingViewSubView}>
                <div className={styles.topViewLeftDrivingChargingViewSubViewTitleView}>
                  <img
                    className={styles.topViewLeftDrivingChargingViewSubViewTitleViewImg}
                    src={miles_img}
                  />
                  <div className={styles.topViewLeftDrivingChargingViewSubViewTitleViewText}>
                    累计行驶里程（公里）
                  </div>
                </div>
                <div className={styles.topViewLeftDrivingChargingViewSubViewValueView}>
                  {this.toThousands(parseInt(this.state.platformOverviewData?.totalMileage ?? '0'))}
                </div>
              </div>
              <div className={styles.topViewLeftDrivingChargingViewSubView}>
                <div className={styles.topViewLeftDrivingChargingViewSubViewTitleView}>
                  <img
                    className={styles.topViewLeftDrivingChargingViewSubViewTitleViewImg}
                    src={charge_img}
                  />
                  <div className={styles.topViewLeftDrivingChargingViewSubViewTitleViewText}>
                    累计充电时间（小时）
                  </div>
                </div>
                <div className={styles.topViewLeftDrivingChargingViewSubViewValueView}>
                  {this.toThousands(
                    parseInt(this.state.platformOverviewData?.totalDuration ?? '0'),
                  )}
                </div>
              </div>
            </div>
            <div className={styles.topViewLeftCarView}>
              <div className={styles.topViewLeftCarViewLeftView}>
                <div className={styles.topViewLeftCarViewLeftViewItem}>
                  <div className={styles.topViewLeftCarViewLeftViewItemTitleView}>
                    <img
                      className={styles.topViewLeftCarViewLeftViewItemTitleViewImg}
                      src={vip_img}
                    />
                    <div className={styles.topViewLeftCarViewLeftViewItemTitleViewText}>
                      平台注册车辆数
                    </div>
                  </div>
                  <div className={styles.topViewLeftCarViewLeftViewItemValueView}>
                    {this.toThousands(this.state.enrollVehicles)}
                  </div>
                </div>
                <div className={styles.topViewLeftCarViewLeftViewItem}>
                  <div className={styles.topViewLeftCarViewLeftViewItemTitleView}>
                    <img
                      className={styles.topViewLeftCarViewLeftViewItemTitleViewImg}
                      src={cars_number_img}
                    />
                    <div className={styles.topViewLeftCarViewLeftViewItemTitleViewText}>
                      在线车辆数
                    </div>
                  </div>
                  <div className={styles.topViewLeftCarViewLeftViewItemValueView}>
                    {this.toThousands(this.state.onlineCarsTotal)}
                  </div>
                </div>
                <div className={styles.topViewLeftCarViewLeftViewItem}>
                  <div className={styles.topViewLeftCarViewLeftViewItemTitleView}>
                    <img
                      className={styles.topViewLeftCarViewLeftViewItemTitleViewImg}
                      src={cars_active_img}
                    />
                    <div className={styles.topViewLeftCarViewLeftViewItemTitleViewText}>
                      今日活跃车辆数
                    </div>
                  </div>
                  <div className={styles.topViewLeftCarViewLeftViewItemValueView}>
                    {this.toThousands(this.state.platformOverviewData?.inActiveNum ?? '0')}
                  </div>
                </div>
                <div className={styles.topViewLeftCarViewLeftViewItem}>
                  <div className={styles.topViewLeftCarViewLeftViewItemTitleView}>
                    <img
                      className={styles.topViewLeftCarViewLeftViewItemTitleViewImg}
                      src={charge_img}
                    />
                    <div className={styles.topViewLeftCarViewLeftViewItemTitleViewText}>
                      当前充电车辆数
                    </div>
                  </div>
                  <div className={styles.topViewLeftCarViewLeftViewItemValueView}>
                    {this.toThousands(this.state.platformOverviewData?.inChargeNum ?? '0')}
                  </div>
                </div>
              </div>
              <div className={styles.topViewLeftCarViewRightView}>
                <div className={styles.topViewLeftCarViewRightViewItem}>
                  <div className={styles.topViewLeftCarViewRightViewItemTitleView}>
                    <img
                      className={styles.topViewLeftCarViewRightViewItemTitleViewImg}
                      src={new_car_img}
                    />
                    <div className={styles.topViewLeftCarViewRightViewItemTitleViewText}>
                      今日新注册车辆数
                    </div>
                  </div>
                  <div className={styles.topViewLeftCarViewRightViewItemValueView}>
                    {this.state.enrollVehiclesToday}
                  </div>
                </div>
                <div className={styles.topViewLeftCarViewRightViewEchart} id={'carNumberEchart'} />
              </div>
            </div>
          </div>
          <div className={styles.topViewMid}>
            <div className={styles.topViewMidEchart} id={'mapEchart'} />
          </div>
          <div className={styles.topViewRight}>
            <div className={styles.topViewRightTitleView}>
              <div className={styles.topViewRightTitleViewImg} />
              <div className={styles.topViewRightTitleViewText}>在线车辆数（辆）</div>
              {this.state.mapIsInProvince ? (
                <div
                  onClick={() => this.backToChinaMap()}
                  className={styles.topViewRightTitleViewBackView}
                >
                  返回
                </div>
              ) : null}
            </div>
            <div className={styles.topViewRightTableView}>
              <Table
                columns={columns}
                pagination={false}
                dataSource={dataSource}
                scroll={{ y: 510 }}
                onRow={record => {
                  return {
                    onClick: async event => {
                      if (!this.state.mapIsInProvince) {
                        await this.setState({
                          mapIsInProvince: true,
                          selectProvinceName: record.area,
                        });
                        const provinceCode = this.registerProvinceMap(record.area);
                        this.state.mapEchart.clear();
                        const mapOption = this.getMapOption(provinceCode);
                        this.state.mapEchart.setOption(mapOption);
                      }
                    }, // 点击行
                    onMouseEnter: event => {
                      if (this.state.mapEchart) {
                        this.state.mapEchart.dispatchAction({
                          type: 'highlight',
                          geoIndex: 0,
                          geoId: 'myMap',
                          name: record.area,
                        });
                      }
                    }, // 鼠标移入行
                    onMouseLeave: event => {
                      if (this.state.mapEchart) {
                        this.state.mapEchart.dispatchAction({
                          type: 'downplay',
                          geoIndex: 0,
                          geoId: 'myMap',
                          name: record.area,
                        });
                      }
                    },
                  };
                }}
              />
            </div>
          </div>
        </div>
        <div className={styles.midView}>
          <div className={styles.midViewItemBack}>
            <div className={styles.midViewItemView}>
              <div className={styles.midViewItemViewTitle}>品牌占比</div>
              <div className={styles.midViewItemViewEchart} id={'brandEchart'} />
            </div>
            <div className={styles.midViewItemView}>
              <div className={styles.midViewItemViewTitle}>车系占比</div>
              <div className={styles.midViewItemViewEchart} id={'seriesEchart'} />
            </div>
            <div className={styles.midViewItemView}>
              <div className={styles.midViewItemViewTitle}>动力类型占比</div>
              <div className={styles.midViewItemViewEchart} id={'powerEchart'} />
            </div>
          </div>
          <div className={styles.midViewItemBack}>
            <div className={styles.midViewItemView}>
              <div className={styles.midViewItemViewTitleContentView}>
                <div className={styles.midViewItemViewTitle}>动力电池健康度占比</div>
                {/*<div className={styles.midViewItemViewTitleDetail}>平均健康度 90%</div>*/}
              </div>
              <div className={styles.midViewItemViewEchart} id={'batteryHealthEchart'} />
            </div>
            <div className={styles.midViewItemView}>
              <div className={styles.midViewItemViewTitle}>近7天日行驶里程（公里）</div>
              <div className={styles.midViewItemViewEchart} id={'dailyMileageEchart'} />
            </div>
            <div className={styles.midViewItemView}>
              <div className={styles.midViewItemViewTitle}>近7天日充电时间（小时）</div>
              <div className={styles.midViewItemViewEchart} id={'dailyChargeEchart'} />
            </div>
          </div>
          <div className={styles.midViewItemBack}>
            <div className={styles.midViewItemView}>
              <div className={styles.midViewItemViewTitleContentView}>
                <div className={styles.midViewItemViewTitle}>用车高峰</div>
                <div className={styles.midViewItemViewTitleDateSelectView}>
                  <div
                    onClick={() => this.changeTrafficPeakDateSelectIndex(0)}
                    className={styles.midViewItemViewTitleDateSelectViewItem}
                    style={{
                      color: this.state.trafficPeakDateSelectIndex === 0 ? '#0670FF' : 'black',
                    }}
                  >
                    昨天
                  </div>
                  <div
                    onClick={() => this.changeTrafficPeakDateSelectIndex(1)}
                    className={styles.midViewItemViewTitleDateSelectViewItem}
                    style={{
                      color: this.state.trafficPeakDateSelectIndex === 1 ? '#0670FF' : 'black',
                    }}
                  >
                    近7天平均
                  </div>
                  <div
                    onClick={() => this.changeTrafficPeakDateSelectIndex(2)}
                    className={styles.midViewItemViewTitleDateSelectViewItem}
                    style={{
                      color: this.state.trafficPeakDateSelectIndex === 2 ? '#0670FF' : 'black',
                    }}
                  >
                    近30天平均
                  </div>
                </div>
              </div>
              <div className={styles.midViewItemViewEchart} id={'trafficPeakEchart'} />
            </div>
            <div className={styles.midViewItemView}>
              <div className={styles.midViewItemViewTitleContentView}>
                <div className={styles.midViewItemViewTitle}>开始充电SOC占比</div>
                <div className={styles.midViewItemViewTitleDateSelectView}>
                  <div
                    onClick={() => this.changeStartSOCDateSelectIndex(0)}
                    className={styles.midViewItemViewTitleDateSelectViewItem}
                    style={{
                      color: this.state.startSOCDateSelectIndex === 0 ? '#0670FF' : 'black',
                    }}
                  >
                    昨天
                  </div>
                  <div
                    onClick={() => this.changeStartSOCDateSelectIndex(1)}
                    className={styles.midViewItemViewTitleDateSelectViewItem}
                    style={{
                      color: this.state.startSOCDateSelectIndex === 1 ? '#0670FF' : 'black',
                    }}
                  >
                    近7天平均
                  </div>
                  <div
                    onClick={() => this.changeStartSOCDateSelectIndex(2)}
                    className={styles.midViewItemViewTitleDateSelectViewItem}
                    style={{
                      color: this.state.startSOCDateSelectIndex === 2 ? '#0670FF' : 'black',
                    }}
                  >
                    近30天平均
                  </div>
                </div>
              </div>
              <div className={styles.midViewItemViewStartSOCDetailView}>
                <div className={styles.midViewItemViewStartSOCEchart} id={'startSOCEchart'} />
                <div className={styles.midViewItemViewStartSOCValueView}>
                  {this.state.testStartSOCData.map((i, index) => {
                    const colorList = ['#00BDA9', '#5E89FC', '#9256ED', '#ED8051', '#ED6AED'];
                    return (
                      <div
                        key={'startSOCDataItem' + index}
                        className={styles.midViewItemViewStartSOCValueViewItem}
                      >
                        <div className={styles.midViewItemViewStartSOCValueViewItemTitleView}>
                          <div
                            className={styles.midViewItemViewStartSOCValueViewItemTitleViewImg}
                            style={{ backgroundColor: colorList[index] }}
                          />
                          <div className={styles.midViewItemViewStartSOCValueViewItemTitleViewText}>
                            {i.name}
                          </div>
                        </div>
                        <div className={styles.midViewItemViewStartSOCValueViewItemValueView}>
                          {index === 0
                            ? this.state.startSOCDateSelectIndex === 0
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.socYesterday?.soclessthen20,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.socYesterday?.soclessthen20,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.soc20to40,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.soc40to60,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.soc60to80,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday
                                          ?.socmorethen80,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) || 0
                              : this.state.startSOCDateSelectIndex === 1
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc7Days?.soclessthen20,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc7Days?.soclessthen20,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.soc20to40,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.soc40to60,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.soc60to80,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.socmorethen80,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) || 0
                              : (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc30Days?.soclessthen20,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc30Days?.soclessthen20,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.soc20to40,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.soc40to60,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.soc60to80,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.socmorethen80,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) || 0
                            : index === 1
                            ? this.state.startSOCDateSelectIndex === 0
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.socYesterday?.soc20to40,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.socYesterday?.soclessthen20,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.soc20to40,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.soc40to60,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.soc60to80,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday
                                          ?.socmorethen80,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) || 0
                              : this.state.startSOCDateSelectIndex === 1
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc7Days?.soc20to40,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc7Days?.soclessthen20,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.soc20to40,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.soc40to60,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.soc60to80,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.socmorethen80,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) || 0
                              : (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc30Days?.soc20to40,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc30Days?.soclessthen20,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.soc20to40,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.soc40to60,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.soc60to80,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.socmorethen80,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) || 0
                            : index === 2
                            ? this.state.startSOCDateSelectIndex === 0
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.socYesterday?.soc40to60,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.socYesterday?.soclessthen20,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.soc20to40,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.soc40to60,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.soc60to80,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday
                                          ?.socmorethen80,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) || 0
                              : this.state.startSOCDateSelectIndex === 1
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc7Days?.soc40to60,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc7Days?.soclessthen20,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.soc20to40,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.soc40to60,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.soc60to80,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.socmorethen80,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) || 0
                              : (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc30Days?.soc40to60,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc30Days?.soclessthen20,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.soc20to40,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.soc40to60,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.soc60to80,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.socmorethen80,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) || 0
                            : index === 3
                            ? this.state.startSOCDateSelectIndex === 0
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.socYesterday?.soc60to80,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.socYesterday?.soclessthen20,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.soc20to40,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.soc40to60,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.soc60to80,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday
                                          ?.socmorethen80,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) || 0
                              : this.state.startSOCDateSelectIndex === 1
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc7Days?.soc60to80,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc7Days?.soclessthen20,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.soc20to40,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.soc40to60,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.soc60to80,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.socmorethen80,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) || 0
                              : (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc30Days?.soc60to80,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc30Days?.soclessthen20,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.soc20to40,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.soc40to60,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.soc60to80,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.socmorethen80,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) || 0
                            : index === 4
                            ? this.state.startSOCDateSelectIndex === 0
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.socYesterday?.socmorethen80,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.socYesterday?.soclessthen20,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.soc20to40,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.soc40to60,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.soc60to80,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday
                                          ?.socmorethen80,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) || 0
                              : this.state.startSOCDateSelectIndex === 1
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc7Days?.socmorethen80,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc7Days?.soclessthen20,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.soc20to40,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.soc40to60,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.soc60to80,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.socmorethen80,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) || 0
                              : (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc30Days?.socmorethen80,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc30Days?.soclessthen20,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.soc20to40,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.soc40to60,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.soc60to80,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.socmorethen80,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) || 0
                            : 0}
                          %
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
            <div className={styles.midViewItemView}>
              <div className={styles.midViewItemViewTitleContentView}>
                <div className={styles.midViewItemViewTitle}>充电高峰</div>
                <div className={styles.midViewItemViewTitleDateSelectView}>
                  <div
                    onClick={() => this.changeChargePeakDateSelectIndex(0)}
                    className={styles.midViewItemViewTitleDateSelectViewItem}
                    style={{
                      color: this.state.chargePeakDateSelectIndex === 0 ? '#0670FF' : 'black',
                    }}
                  >
                    昨天
                  </div>
                  <div
                    onClick={() => this.changeChargePeakDateSelectIndex(1)}
                    className={styles.midViewItemViewTitleDateSelectViewItem}
                    style={{
                      color: this.state.chargePeakDateSelectIndex === 1 ? '#0670FF' : 'black',
                    }}
                  >
                    近7天平均
                  </div>
                  <div
                    onClick={() => this.changeChargePeakDateSelectIndex(2)}
                    className={styles.midViewItemViewTitleDateSelectViewItem}
                    style={{
                      color: this.state.chargePeakDateSelectIndex === 2 ? '#0670FF' : 'black',
                    }}
                  >
                    近30天平均
                  </div>
                </div>
              </div>
              <div className={styles.midViewItemViewEchart} id={'chargePeakEchart'} />
            </div>
          </div>
          <div className={styles.midViewItemBack}>
            <div className={styles.midViewItemView}>
              <div className={styles.midViewItemViewTitle}>车系报警占比</div>
              <div className={styles.midViewItemViewEchart} id={'seriesAlarmEchart'} />
              <div className={styles.midViewItemViewAlarmView}>
                <div className={styles.midViewItemViewAlarmViewTitle}>报警总数</div>
                <div className={styles.midViewItemViewAlarmViewDetail}>
                  <div className={styles.midViewItemViewAlarmViewDetailValue}>
                    {this.toThousands(this.setTotalAlarmsValue())}
                  </div>
                </div>
              </div>
            </div>
            <div className={styles.midViewItemView}>
              <div className={styles.midViewItemViewTitle}>
                报警等级占比-
                {this.state.selectAlarmSeries !== null
                  ? this.state.selectAlarmSeries?.carSeries
                  : ''}
              </div>
              <div className={styles.midViewItemViewAlarmInfoView}>
                <div className={styles.midViewItemViewAlarmInfoViewItem}>
                  <div className={styles.midViewItemViewAlarmInfoViewItemLeft}>
                    <img
                      className={styles.midViewItemViewAlarmInfoViewItemLeftImg}
                      src={alarm_red_img}
                    />
                    <div className={styles.midViewItemViewAlarmInfoViewItemLeftTextView}>
                      <div className={styles.midViewItemViewAlarmInfoViewItemLeftTextViewTitle}>
                        一级报警{this.state.selectAlarmSeries?.firstorder}
                      </div>
                      <div className={styles.midViewItemViewAlarmInfoViewItemLeftTextViewSubTitle}>
                        描述功能的介绍以及详细信息
                      </div>
                    </div>
                  </div>
                  <div className={styles.midViewItemViewAlarmInfoViewItemRight}>
                    <Progress
                      type="circle"
                      percent={
                        parseFloat(
                          String(
                            this.state.selectAlarmSeries?.firstorder /
                              this.state.selectAlarmSeries?.total,
                          ),
                        ).toFixed(2) * 100
                      }
                      width={40}
                      status="normal"
                      strokeColor="#FD716D"
                    />
                  </div>
                </div>
                <div className={styles.midViewItemViewAlarmInfoViewItem}>
                  <div className={styles.midViewItemViewAlarmInfoViewItemLeft}>
                    <img
                      className={styles.midViewItemViewAlarmInfoViewItemLeftImg}
                      src={alarm_yellow_img}
                    />
                    <div className={styles.midViewItemViewAlarmInfoViewItemLeftTextView}>
                      <div className={styles.midViewItemViewAlarmInfoViewItemLeftTextViewTitle}>
                        二级报警{this.state.selectAlarmSeries?.secondorder}
                      </div>
                      <div className={styles.midViewItemViewAlarmInfoViewItemLeftTextViewSubTitle}>
                        描述功能的介绍以及详细信息
                      </div>
                    </div>
                  </div>
                  <div className={styles.midViewItemViewAlarmInfoViewItemRight}>
                    <Progress
                      type="circle"
                      percent={
                        parseFloat(
                          String(
                            this.state.selectAlarmSeries?.secondorder /
                              this.state.selectAlarmSeries?.total,
                          ),
                        ).toFixed(2) * 100
                      }
                      width={40}
                      status="normal"
                      strokeColor="#F9CB2D"
                    />
                  </div>
                </div>
                <div className={styles.midViewItemViewAlarmInfoViewItem}>
                  <div className={styles.midViewItemViewAlarmInfoViewItemLeft}>
                    <img
                      className={styles.midViewItemViewAlarmInfoViewItemLeftImg}
                      src={alarm_blue_img}
                    />
                    <div className={styles.midViewItemViewAlarmInfoViewItemLeftTextView}>
                      <div className={styles.midViewItemViewAlarmInfoViewItemLeftTextViewTitle}>
                        三级报警{this.state.selectAlarmSeries?.thirdorder}
                      </div>
                      <div className={styles.midViewItemViewAlarmInfoViewItemLeftTextViewSubTitle}>
                        描述功能的介绍以及详细信息
                      </div>
                    </div>
                  </div>
                  <div className={styles.midViewItemViewAlarmInfoViewItemRight}>
                    <Progress
                      type="circle"
                      percent={
                        parseFloat(
                          String(
                            this.state.selectAlarmSeries?.thirdorder /
                              this.state.selectAlarmSeries?.total,
                          ),
                        ).toFixed(2) * 100
                      }
                      width={40}
                      status="normal"
                      strokeColor="#89A1F9"
                    />
                  </div>
                </div>
                <div className={styles.midViewItemViewAlarmInfoViewItem}>
                  <div className={styles.midViewItemViewAlarmInfoViewItemLeft}>
                    <img
                      className={styles.midViewItemViewAlarmInfoViewItemLeftImg}
                      src={alarm_green_img}
                    />
                    <div className={styles.midViewItemViewAlarmInfoViewItemLeftTextView}>
                      <div className={styles.midViewItemViewAlarmInfoViewItemLeftTextViewTitle}>
                        其他报警{this.state.selectAlarmSeries?.other}
                      </div>
                      <div className={styles.midViewItemViewAlarmInfoViewItemLeftTextViewSubTitle}>
                        描述功能的介绍以及详细信息
                      </div>
                    </div>
                  </div>
                  <div className={styles.midViewItemViewAlarmInfoViewItemRight}>
                    <Progress
                      type="circle"
                      percent={
                        parseFloat(
                          String(
                            this.state.selectAlarmSeries?.other /
                              this.state.selectAlarmSeries?.total,
                          ),
                        ).toFixed(2) * 100
                      }
                      width={40}
                      status="normal"
                      strokeColor="#89A1F9"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div className={styles.midViewItemView}>
              <div className={styles.midViewItemViewTitleContentView}>
                <div className={styles.midViewItemViewTitle}>结束充电SOC占比</div>
                <div className={styles.midViewItemViewTitleDateSelectView}>
                  <div
                    onClick={() => this.changeFinishSOCDateSelectIndex(0)}
                    className={styles.midViewItemViewTitleDateSelectViewItem}
                    style={{
                      color: this.state.finishSOCDateSelectIndex === 0 ? '#0670FF' : 'black',
                    }}
                  >
                    昨天
                  </div>
                  <div
                    onClick={() => this.changeFinishSOCDateSelectIndex(1)}
                    className={styles.midViewItemViewTitleDateSelectViewItem}
                    style={{
                      color: this.state.finishSOCDateSelectIndex === 1 ? '#0670FF' : 'black',
                    }}
                  >
                    近7天平均
                  </div>
                  <div
                    onClick={() => this.changeFinishSOCDateSelectIndex(2)}
                    className={styles.midViewItemViewTitleDateSelectViewItem}
                    style={{
                      color: this.state.finishSOCDateSelectIndex === 2 ? '#0670FF' : 'black',
                    }}
                  >
                    近30天平均
                  </div>
                </div>
              </div>
              <div className={styles.midViewItemViewStartSOCDetailView}>
                <div className={styles.midViewItemViewStartSOCEchart} id={'finishSOCEchart'} />
                <div className={styles.midViewItemViewStartSOCValueView}>
                  {this.state.testFinishSOCData.map((i, index) => {
                    const colorList = ['#00BDA9', '#5E89FC', '#9256ED', '#ED8051', '#ED6AED'];
                    return (
                      <div
                        key={'finishSOCDataItem' + index}
                        className={styles.midViewItemViewStartSOCValueViewItem}
                      >
                        <div className={styles.midViewItemViewStartSOCValueViewItemTitleView}>
                          <div
                            className={styles.midViewItemViewStartSOCValueViewItemTitleViewImg}
                            style={{ backgroundColor: colorList[index] }}
                          />
                          <div className={styles.midViewItemViewStartSOCValueViewItemTitleViewText}>
                            {i.name}
                          </div>
                        </div>
                        <div className={styles.midViewItemViewStartSOCValueViewItemValueView}>
                          {index === 0
                            ? this.state.startSOCDateSelectIndex === 0
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.socYesterday?.e_soclessthen50,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.socYesterday
                                        ?.e_soclessthen50,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.e_soc50to70,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.e_soc70to90,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday
                                          ?.e_socmorethen90,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) ?? 0
                              : this.state.startSOCDateSelectIndex === 1
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc7Days?.e_soclessthen50,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc7Days?.e_soclessthen50,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.e_soc50to70,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.e_soc70to90,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.e_socmorethen90,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) ?? 0
                              : (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc30Days?.e_soclessthen50,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc30Days?.e_soclessthen50,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.e_soc50to70,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.e_soc70to90,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.e_socmorethen90,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) ?? 0
                            : index === 1
                            ? this.state.startSOCDateSelectIndex === 0
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.socYesterday?.e_soc50to70,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.socYesterday
                                        ?.e_soclessthen50,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.e_soc50to70,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.e_soc70to90,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday
                                          ?.e_socmorethen90,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) ?? 0
                              : this.state.startSOCDateSelectIndex === 1
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc7Days?.e_soc50to70,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc7Days?.e_soclessthen50,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.e_soc50to70,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.e_soc70to90,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.e_socmorethen90,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) ?? 0
                              : (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc30Days?.e_soc50to70,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc30Days?.e_soclessthen50,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.e_soc50to70,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.e_soc70to90,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.e_socmorethen90,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) ?? 0
                            : index === 2
                            ? this.state.startSOCDateSelectIndex === 0
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.socYesterday?.e_soc70to90,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.socYesterday
                                        ?.e_soclessthen50,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.e_soc50to70,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.e_soc70to90,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday
                                          ?.e_socmorethen90,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) ?? 0
                              : this.state.startSOCDateSelectIndex === 1
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc7Days?.e_soc70to90,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc7Days?.e_soclessthen50,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.e_soc50to70,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.e_soc70to90,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.e_socmorethen90,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) ?? 0
                              : (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc30Days?.e_soc70to90,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc30Days?.e_soclessthen50,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.e_soc50to70,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.e_soc70to90,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.e_socmorethen90,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) ?? 0
                            : index === 3
                            ? this.state.startSOCDateSelectIndex === 0
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.socYesterday?.e_socmorethen90,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.socYesterday
                                        ?.e_soclessthen50,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.e_soc50to70,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday?.e_soc70to90,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.socYesterday
                                          ?.e_socmorethen90,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) ?? 0
                              : this.state.startSOCDateSelectIndex === 1
                              ? (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc7Days?.e_socmorethen90,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc7Days?.e_soclessthen50,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.e_soc50to70,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.e_soc70to90,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc7Days?.e_socmorethen90,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) ?? 0
                              : (
                                  (parseFloat(
                                    this.state.platformOverviewData?.soc30Days?.e_socmorethen90,
                                  ) /
                                    (parseFloat(
                                      this.state.platformOverviewData?.soc30Days?.e_soclessthen50,
                                    ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.e_soc50to70,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.e_soc70to90,
                                      ) +
                                      parseFloat(
                                        this.state.platformOverviewData?.soc30Days?.e_socmorethen90,
                                      ))) *
                                    100 || 0
                                ).toFixed(0) ?? 0
                            : 0}
                          %
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
        <Modal
          title=""
          visible={this.state.showAlarmModal}
          centered
          width="100%"
          bodyStyle={{ height: '900px' }}
          footer={null}
          onCancel={() => this.setState({ showAlarmModal: false })}
          onOk={() => this.setState({ showAlarmModal: false })}
        >
          <iframe
            src={this.state.alarmUrl}
            style={{ display: 'block', height: '100%' }}
            width="100%"
            frameBorder="0"
          />
        </Modal>
      </div>
    );
  }
}
export default connect(mapStateToProps)(PlatformInformationOverview);
